<script setup lang="ts">
import { ModalUtil } from '/@lib/utils/modal.ts'
import { useModalStatus } from '/@lib/hooks/useModalStatus.ts'
import { useLoading } from '/@lib/hooks/useLoading.ts'
import { useForm } from '/@lib/hooks/useForm.ts'
import { sys_normal_disable } from '/@/const/Options.ts'
import { PostVO } from '/@/api/system/sysPost/types'
import { ApiSysPost } from '/@/api/system/sysPost'
import { ApiSysDept } from '/@/api/system/sysDept'

const { loading, showLoading, hideLoading } = useLoading()
const { modalVisible, modalTitle, showModal, hideModal, setModalTitle } = useModalStatus()
const formRef = ref()
const { form, resetForm } = useForm({
  postId: undefined,
  deptId: undefined,
  postCode: '',
  postName: '',
  postCategory: '',
  sortNum: 0,
  status: '0',
  remark: ''
})
const formRules = {
  postName: [{ required: true, message: '岗位名称不能为空', trigger: 'blur' }],
  postCode: [{ required: true, message: '岗位编码不能为空', trigger: 'blur' }],
  deptId: [{ required: true, message: '部门不能为空', trigger: 'change' }],
  sortNum: [{ required: true, message: '岗位顺序不能为空', trigger: 'blur' }]
}
const closeCancel = () => {
  formRef.value?.resetFields()
  resetForm()
  hideModal()
}
const deptTreeOptions = ref<any[]>([])

/** 打开 Modal 操作 */
const openAdd = async () => {
  showModal()
  setModalTitle('添加岗位')
  await handleOpenDefaultData()
}
const openEdit = async (row: PostVO) => {
  Object.assign(form, row)
  showModal()
  setModalTitle('修改岗位')
  await handleOpenDefaultData()
}
defineExpose({ openAdd, openEdit })
const emit = defineEmits(['submit-success'])
/** 提交按钮 */
const submitForm = async () => {
  try {
    await formRef.value?.validate()
    showLoading()
    if (form.postId) {
      await ApiSysPost.update(form)
    } else {
      await ApiSysPost.save(form)
    }
    ModalUtil.msgSuccess('操作成功')
    hideModal()
    emit('submit-success')
  } finally {
    hideLoading()
  }
}
/** Modal Open 处理默认数据 */
const handleOpenDefaultData = async () => {
  try {
    showLoading()
    // 获取部门列表
    deptTreeOptions.value = await ApiSysDept.tree()
  } finally {
    hideLoading()
  }
}


const formItems = ref([
  {
    prop: 'deptId',
    label: '部门',
    slot: 'slot-deptId',
    attrs: {
      placeholder: '请选择部门'
    },
    span: 2
  },
  {
    prop: 'postCode',
    label: '岗位编码',
    attrs: {
      placeholder: '请输入岗位编码'
    }
  },
  {
    prop: 'postName',
    label: '岗位名称',
    attrs: {
      placeholder: '请输入岗位名称'
    }
  },
  // {
  //   prop: 'postCategory',
  //   label: '类别编码',
  //   attrs: {
  //     placeholder: '请输入类别编码',
  //   },
  // },
  {
    prop: 'sortNum',
    label: '显示排序',
    slot: 'el-input-number',
    attrs: {
      placeholder: '请输入显示排序',
      min: 0
    }
  },
  {
    prop: 'status',
    label: '状态',
    slot: 'agel-radio',
    attrs: {
      border: true,
      options: sys_normal_disable
    }
  },
  {
    prop: 'remark',
    label: '备注',
    attrs: {
      placeholder: '请输入内容',
      type: 'textarea',
      rows: 2
    }
  }
])

</script>

<template>
  <!-- 添加或修改对话框 -->
  <el-dialog
    :title="modalTitle"
    v-model="modalVisible"
    width="50%"
    top="5vh"
    @close="closeCancel"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-form
      ref="formRef"
      v-loading="loading"
      :model="form"
      :rules="formRules"
      label-width="160px"
      label-position="right"
    >
      <AgelFormDesc :items="formItems" border :column="1">
        <template #slot-deptId>
          <el-tree-select
            v-model="form.deptId"
            :data="deptTreeOptions"
            value-key="id"
            :props="{ value: 'id', label: 'label', children: 'children' }"
            placeholder="请选择部门"
            check-strictly
            default-expand-all
          />
        </template>
      </AgelFormDesc>

      <!--      <el-form-item label="岗位名称" prop="postName">-->
      <!--        <el-input v-model="form.postName" placeholder="请输入岗位名称" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="部门" prop="deptId">-->
      <!--        <el-tree-select-->
      <!--          v-model="form.deptId"-->
      <!--          :data="deptTreeOptions"-->
      <!--          value-key="id"-->
      <!--          :props="{ value: 'id', label: 'label', children: 'children' }"-->
      <!--          placeholder="请选择部门"-->
      <!--          check-strictly-->
      <!--          default-expand-all-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="岗位编码" prop="postCode">-->
      <!--        <el-input v-model="form.postCode" placeholder="请输入编码名称" />-->
      <!--      </el-form-item>-->
      <!--      &lt;!&ndash;      <el-form-item label="类别编码" prop="postCategory">&ndash;&gt;-->
      <!--      &lt;!&ndash;        <el-input v-model="form.postCategory" placeholder="请输入类别编码"/>&ndash;&gt;-->
      <!--      &lt;!&ndash;      </el-form-item>&ndash;&gt;-->
      <!--      <el-form-item label="岗位顺序" prop="sortNum">-->
      <!--        <el-input-number v-model="form.sortNum" controls-position="right" :min="0" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="岗位状态" prop="status">-->
      <!--        <el-radio-group v-model="form.status">-->
      <!--          <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value" border>{{ dict.label }}</el-radio>-->
      <!--        </el-radio-group>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="备注" prop="remark">-->
      <!--        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" rows="2" />-->
      <!--      </el-form-item>-->
    </el-form>

    <!-- 底部按钮 -->
    <template #footer>
      <div>
        <el-button @click="closeCancel">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitForm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
